<template>
	<view class="w-full flex-col flex-a-c relative">
		<template v-if="votesInfo">
			<swiper class="w-full h-95n" circular :indicator-dots="true" :autoplay="true" :interval="2000"
				:duration="500">
				<swiper-item v-for="(item,index) in votesInfo.slider_image" :key="index">
					<image :src="item" mode="aspectFill" class="box-full"></image>
				</swiper-item>
			</swiper>
			<view class="w-full flex-col-center font-bold">
				<view class="flex flex-a-c mt-20 mb-14">
					<text class="iconfont icon-daojishi1 text333 text-size-32"></text>
					<text class="ml-20 mb-6">投票倒计时</text>
				</view>
				<uni-countdown :day="day" :hour="hour" :minute="minute" :second="second"
					:show-colon="false"></uni-countdown>
			</view>
			<view class="w-full px-28 my-20 flex-center">
				<image src="@/static/image/title.png" mode="heightFix" class="h-18n"></image>
			</view>
			<!-- <view class="w-full px-10 mb-20">
				<uni-search-bar class="w-full mb-10" @confirm="onInput" cancelButton="none" bgColor="#efefef"
					placeholder="输入姓名或编号搜索" v-model="searchValue" @input="onInput"></uni-search-bar>
			</view> -->
			<view class="w-full px-28 mb-20 relative">
				<image class="w-full" src="@/static/image/table_bg.png" mode="widthFix"></image>
				<view class="absolute t-20 l-30 b-20 r-30 z-index-10 p-28 textfff font-bold flex-col overflow-hidden">
					<view class="w-full flex">
						<view class="flex-2 flex-center">
							最新排名
						</view>
						<view class="flex-5 flex-center">
							店铺名称
						</view>
						<view class="flex-2 flex-center">
							票数
						</view>
					</view>
					<view scroll-y class="flex-1 w-full mt-20 relative">
						<view class="absolute t-0 b-0 r-0 l-0">
							<scroll-view class="box-full" scroll-y>
								<view class="w-full flex mb-30" v-for="(item,index) in rankList" :key="item.id">
									<view class="flex-2 flex-center">
										第{{index + 1}}名
									</view>
									<view class="flex-5 flex-center relative">
										<view class="absolute r-0 b-0 t-0 l-0 text-overflow-1 text-align-center">
											<span>{{item.title}}</span>
										</view>
									</view>
									<view class="flex-2 flex-center">
										{{item.vote_count}}
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="w-full flex-center mt-10 text-size-30 font-bold">
				我的票数：51票， 我的排名：30名
			</view> -->
		</template>
	</view>
</template>

<script setup>
	import {
		useThreadInfo
	} from '@/hooks'
	import {
		voteRanking
	} from '@/network/api.js'
	const {
		getThreadInfo,
	} = useThreadInfo()
	const votesInfo = ref()
	const day = ref(0)
	const hour = ref(0)
	const minute = ref(0)
	const second = ref(0)
	const rankList = ref([])
	//获取排行榜
	const getVotesRanking = async () => {
		const res = await voteRanking(votesInfo.value.id)
		if (res.status === 200) {
			rankList.value = res.data
		} else uni.showToast({
			title: res.msg,
			icon: ''
		})
	}
	// 获取活动详情
	const getThreadInfoFun = async () => {
		const res = await getThreadInfo()
		day.value = res.time.day
		hour.value = res.time.hour
		minute.value = res.time.minute
		second.value = res.time.second
		votesInfo.value = res.votesInfo
		getVotesRanking()
	}
	onShow(() => {
		getThreadInfoFun()
	})
</script>

<style scoped lang="scss">
	page {
		background: #fff;
		padding-bottom: 30rpx;
	}
</style>